<script setup lang="ts">
import { UnwrapRef } from "vue";
import { tools } from "@/utils/utils";

// 组件接口
const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
  winTile: {
    type: String,
    required: true,
  },
  loading: {
    type: Boolean,
    required: false,
    default: false,
  },
});

// 常量
interface formatData {
  typeField: string;
  BottomShow: boolean;
  list: AddrCategory[];
}
interface AddrCategory {
  typeField: string;
  category: string;
}

// 响应变量
let showData: Ref<UnwrapRef<formatData>> = ref({
  typeField: "",
  BottomShow: false,
  list: [],
});
const loading = ref(false);

// 事件
// 在组件挂载后执行
onMounted(() => resolveDate(props.data));
watch(
  () => props.data,
  (newData) => {
    resolveDate(newData);
  },
  { deep: true } // 如果 data 是对象或数组，需要深度监听
);

let resolveDate = (promise: any) => {
  try {
    const data: AddrCategory = promise;
    if (data.category == "" || data.category === undefined) {
      noSelectShow();
      return;
    }

    let cateList: string[] = data.category.split("#");
    let value: AddrCategory[] = [];
    cateList.forEach((cate) => {
      let temp: AddrCategory = {
        category: cate,
        typeField: "",
      };
      value.push(temp);
    });

    showData.value.list = value;
    showData.value.BottomShow = true;
    showData.value.typeField = data.typeField;
  } catch (error) {
    showData.value.typeField = JSON.stringify(error, null, 2);
    showData.value.BottomShow = false;
  }
};

const noSelectShow = () => {
  showData.value.typeField = "没有查询到该type。分词系统暂不支持该type。";
  showData.value.BottomShow = false;
  showData.value.list = [];
};
</script>

<template>
  <el-card
    v-loading="loading"
    element-loading-text="Loading..."
    :element-loading-spinner="tools.svg"
    element-loading-svg-view-box="-10, -10, 50, 50"
    element-loading-background="rgba(122, 122, 122, 0.8)"
    :style="{
      width: '60%',
      backgroundImage: 'radial-gradient(circle, #ecf5ff, #545c64)',
    }"
  >
    <template #header>
      <el-tag :type="'success'" :key="showData.typeField" effect="dark" round>{{
        showData.typeField
      }}</el-tag>
    </template>

    <el-table
      :data="showData.list"
      :border="true"
      :style="{
        width: '100%',

        background: '#545c64',
      }"
      height="100%"
      row-class-name="custom-row"
    >
      <el-table-column align="center" prop="category" label="属性标签">
        <template #default="scope">
          <el-tag :type="''" :key="scope.row.category" effect="dark" round>{{
            scope.row.category
          }}</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<style scoped>
/* 使用 ::v-deep // :deep 方法穿透组件样式作用域 */
.el-table :deep .custom-row {
  --el-table-tr-bg-color: #545c64;
  /*var(--el-color-success-light-9);*/
}

.el-table {
  --el-table-border-color: #545c64;
}
</style>
